import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getChannelsAction, updateIdAction } from '../store/action/channel';

export default function Channel() {
  const { channelsList, currentId } = useSelector((state) => state.channel);
  const dispatch = useDispatch();
  // console.log('channelsList -----> ', channelsList);
  useEffect(() => {
    // 页面只管调用，不关心getChannelsAction()返回什么
    dispatch(getChannelsAction());
    // 把 dispatch 当做依赖，放进来，不会有影响，因为 dispatch 不会改变的
  }, [dispatch]);
  return (
    <ul className="category">
      {channelsList.map((item) => {
        return (
          <li
            onClick={() => dispatch(updateIdAction(item.id))}
            className={currentId === item.id ? 'select' : ''}
            key={item.id}
          >
            {item.name}
          </li>
        );
      })}
      {/* <li className="select">推荐</li> */}
    </ul>
  );
}
